import { defineComponent } from "vue";
import styles from "./lookOverTable.module.less";

export default defineComponent({
  props: {
    listArray: {
      type: Array,
      default: [],
    }
  },
  setup(props: any) {

    const ItemRender = (item: any) => {
      switch (item.type) {
        case 'span':
          return <span>{item.value}</span>
        case 'img':
          return <img src={item.value} class={styles.img} />
        case 'customer':
          return item.value(item)
      }
    }
    //列表展示
    const ListTable = () => (
      <a-list
        dataSource={props.listArray}
        v-slots={{
          renderItem: ({ item, index }: any) => (
            <div class={(index % 2) ? styles.listItemWhite : styles.listItemGray} >
              <div class={styles.listItemLabel}>{item.label}</div>
              {

                ItemRender(item)
              }
            </div>
          ),
        }}
      ></a-list>
    )
    return () => <ListTable />
  }
})